import React from 'react';
import {Button} from 'antd';
import {WeaTools, WeaLocaleProvider, WeaDialog} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

import './style/';

class WeaVersion extends React.Component {
    state = {visible: false, loading: false, data: {}};

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onDownload = this.onDownload.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onShow = this.onShow.bind(this);
    }

    render() {
        const {visible, loading, data} = this.state;
        const {logo, label1, cversion, label2, companyname, label3, website, msg1, msg2, msg3, msg4, label4, copyright} = data;

        return (
            <WeaDialog
                visible={visible}
                loading={loading}
                title={getLabel(567, '版本')}
                icon="wevicon-wea-version"
                iconBgcolor='#a7adb5'
                style={{width: 720, height: 400}}
                zIndex={100}
                hasScroll={true}
                maskClosable={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <div className="wea-version-body">
                    <div className="wea-version-logo">
                        <img src={logo} alt=""/>
                    </div>
                    <div className="wea-version-split"></div>
                    <div className="wea-version-label1">
                        <span>{label1}</span>
                        <span>:&nbsp;&nbsp;</span>
                        <span>{cversion}</span>
                    </div>
                    <div className="wea-version-label2">
                        <span>{label2}</span>
                        <span>:&nbsp;&nbsp;</span>
                        <span>{companyname}</span>
                    </div>
                    <div className="wea-version-label3">
                        <span>{label3}</span>
                        <span>:&nbsp;&nbsp;</span>
                        <span><a href={`http://${website}`} target="_blank">{website}</a></span>
                    </div>
                    <div className="wea-version-msg">
                        <p>{msg1}</p>
                        <p>{msg2}</p>
                        <p>{msg3}</p>
                        <p className="wea-version-msg4">{msg4}</p>
                    </div>
                    <div className="wea-version-label4">
                        <span>{label4}</span>
                        <span>&nbsp;&nbsp;&copy;&nbsp;&nbsp;</span>
                        <span>{copyright}</span>
                    </div>
                </div>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onDownload}>{getLabel(501149, '下载版本信息')}</Button>);
        buttons.push(<Button type="primary" onClick={this.onCancel}>{getLabel(83446, '确定')}</Button>);
        return buttons;
    }

    onDownload() {
        window.open('/api/system/license/downloadVersion');
    }

    onCancel() {
        this.setState({visible: false});
    }

    onShow() {
        this.setState({visible: true, loading: true});
        WeaTools.callApi('/api/portal/systemInfo/getVersion', 'GET', {}).then(result => {
            const {data} = result;
            this.setState({loading: false, data: data});
        });
    }
}

export default WeaVersion;
